// 创建一个简化版的前端页面，用于部署展示
import React from 'react';

const Home: React.FC = () => {
  return (
    <div className="min-h-screen bg-gradient-to-b from-indigo-50 to-white">
      <header className="bg-white shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16">
            <div className="flex">
              <div className="flex-shrink-0 flex items-center">
                <h1 className="text-2xl font-bold text-indigo-600">八字风水</h1>
              </div>
              <nav className="ml-6 flex space-x-8">
                <a href="#bazi" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-900 hover:text-indigo-600">
                  八字命理
                </a>
                <a href="#character" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-indigo-600">
                  性格分析
                </a>
                <a href="#fengshui" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-indigo-600">
                  风水住宅
                </a>
                <a href="#tools" className="inline-flex items-center px-1 pt-1 text-sm font-medium text-gray-500 hover:text-indigo-600">
                  小工具
                </a>
              </nav>
            </div>
            <div className="flex items-center">
              <div className="flex items-center space-x-4">
                <button className="text-sm font-medium text-gray-500 hover:text-indigo-600">
                  登录
                </button>
                <button className="inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700">
                  注册
                </button>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main>
        {/* 轮播图 */}
        <div className="relative h-96 bg-indigo-700 overflow-hidden">
          <div className="absolute inset-0 flex flex-col items-center justify-center text-center px-4">
            <h1 className="text-4xl font-bold text-white mb-4">探索命运的奥秘</h1>
            <p className="text-xl text-white mb-8">通过生辰八字，揭示您的人生轨迹</p>
            <button className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100">
              立即体验
            </button>
          </div>
        </div>

        {/* 欢迎区域 */}
        <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 text-center">
          <div>
            <h2 className="text-3xl font-bold text-gray-900 mb-2">探索命理的奥秘，掌握人生的方向</h2>
            <p className="text-xl text-gray-600 mb-6">
              通过专业的八字分析、性格解读与风水指导，助您更好地认识自己，规划未来
            </p>
            <div className="flex justify-center space-x-4">
              <button className="inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                免费注册
              </button>
              <button className="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50">
                立即登录
              </button>
            </div>
          </div>
        </div>

        {/* 功能特点 */}
        <div className="bg-white py-12" id="bazi">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900">八字命理</h2>
              <p className="mt-2 text-lg text-gray-600">
                专业、精准、全面的命理分析与指导服务
              </p>
            </div>
            
            <div className="mt-10">
              <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
                {[
                  {
                    icon: '📊',
                    title: '精准八字分析',
                    description: '基于传统命理学与现代数据分析，提供精准的八字解读与人生轨迹分析'
                  },
                  {
                    icon: '🧠',
                    title: '深度性格洞察',
                    description: '揭示性格特质、优势潜能与发展方向，助您更好地认识自己'
                  },
                  {
                    icon: '🏠',
                    title: '专业风水指导',
                    description: '分析居家环境风水，提供专业改善建议，营造和谐宜居空间'
                  },
                  {
                    icon: '🔮',
                    title: '多元化工具集',
                    description: '提供万年历、星座生肖、姓名测算等多种实用工具，满足多样化需求'
                  }
                ].map((feature, index) => (
                  <div key={index} className="pt-6">
                    <div className="flow-root bg-gray-50 rounded-lg px-6 pb-8">
                      <div className="-mt-6">
                        <div>
                          <span className="inline-flex items-center justify-center p-3 bg-indigo-500 rounded-md shadow-lg text-3xl">
                            {feature.icon}
                          </span>
                        </div>
                        <h3 className="mt-8 text-lg font-medium text-gray-900 tracking-tight">{feature.title}</h3>
                        <p className="mt-5 text-base text-gray-500">
                          {feature.description}
                        </p>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 性格分析 */}
        <div className="py-12 bg-gray-50" id="character">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900">性格分析</h2>
              <p className="mt-2 text-lg text-gray-600">
                了解自己的性格特质，发掘潜在优势
              </p>
            </div>
            
            <div className="mt-10">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <div className="px-6 py-8">
                  <div className="flex flex-col md:flex-row">
                    <div className="md:w-1/2 mb-6 md:mb-0 md:pr-8">
                      <h3 className="text-xl font-bold text-gray-900 mb-4">基于八字的性格分析</h3>
                      <p className="text-gray-600 mb-4">
                        通过您的生辰八字，我们能够分析出您的性格特点、行为模式和思维方式。这些分析基于传统命理学与现代心理学的结合，为您提供全面而准确的性格画像。
                      </p>
                      <p className="text-gray-600 mb-4">
                        了解自己的性格特质，有助于您在工作、学习和人际关系中扬长避短，发挥最大潜能。
                      </p>
                      <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                        开始分析
                      </button>
                    </div>
                    <div className="md:w-1/2">
                      <div className="bg-indigo-50 rounded-lg p-6">
                        <h4 className="text-lg font-medium text-gray-900 mb-4">您将获得的洞察</h4>
                        <ul className="space-y-3">
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">性格优势与潜在挑战</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">适合的职业方向</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">人际关系模式</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">情感表达方式</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">个人成长建议</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 风水住宅 */}
        <div className="py-12" id="fengshui">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900">风水住宅</h2>
              <p className="mt-2 text-lg text-gray-600">
                打造和谐宜居的生活环境
              </p>
            </div>
            
            <div className="mt-10">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <div className="px-6 py-8">
                  <div className="flex flex-col md:flex-row">
                    <div className="md:w-1/2 mb-6 md:mb-0 md:pr-8">
                      <h3 className="text-xl font-bold text-gray-900 mb-4">专业风水分析与指导</h3>
                      <p className="text-gray-600 mb-4">
                        居家环境的风水布局对我们的健康、财运和人际关系有着重要影响。通过分析您的房屋结构和家居摆放，我们能够为您提供专业的风水评估和改善建议。
                      </p>
                      <p className="text-gray-600 mb-4">
                        无论是新居装修还是旧居改造，我们的风水指导都能帮助您营造更加和谐、健康的生活空间。
                      </p>
                      <button className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700">
                        开始分析
                      </button>
                    </div>
                    <div className="md:w-1/2">
                      <div className="bg-indigo-50 rounded-lg p-6">
                        <h4 className="text-lg font-medium text-gray-900 mb-4">风水分析内容</h4>
                        <ul className="space-y-3">
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">房屋朝向与格局评估</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">家具摆放建议</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">色彩搭配指导</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">风水物品摆放</span>
                          </li>
                          <li className="flex items-start">
                            <span className="flex-shrink-0 h-5 w-5 text-indigo-500">✓</span>
                            <span className="ml-2 text-gray-600">改善方案与实施建议</span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* 小工具 */}
        <div className="py-12 bg-gray-50" id="tools">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900">实用小工具</h2>
              <p className="mt-2 text-lg text-gray-600">
                多种便捷工具，满足您的日常需求
              </p>
            </div>
            
            <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
              {[
                {
                  icon: '📅',
                  title: '万年历',
                  description: '查询公历、农历日期，节气、吉凶日等信息'
                },
                {
                  icon: '⭐',
                  title: '星座生肖',
                  description: '查询星座和生肖特点，了解性格与运势'
                },
                {
                  icon: '📝',
                  title: '姓名测算',
                  description: '分析姓名五行，测算姓名对运势的影响'
                },
                {
                  icon: '💭',
                  title: '周公解梦',
                  description: '解析梦境含义，探索潜意识信息'
                }
              ].map((tool, index) => (
                <div key={index} className="bg-white rounded-lg shadow-sm overflow-hidden">
                  <div className="p-6">
                    <div className="text-center">
                      <span className="text-4xl mb-4 block">{tool.icon}</span>
                      <h3 className="text-lg font-medium text-gray-900 mb-2">{tool.title}</h3>
                      <p className="text-sm text-gray-500 mb-4">{tool.description}</p>
                      <button className="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50">
                        立即使用
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* 会员权益 */}
        <div className="bg-indigo-50 py-12">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="text-center">
              <h2 className="text-2xl font-bold text-gray-900">VIP会员特权</h2>
              <p className="mt-2 text-lg text-gray-600">
                开通VIP会员，享受更多专业服务与特权
              </p>
            </div>
            
            <div className="mt-10 bg-white rounded-lg shadow-lg overflow-hidden">
              <div className="px-6 py-8 sm:p-10 sm:pb-6">
                <div className="flex justify-center">
                  <span className="inline-flex px-4 py-1 rounded-full text-sm font-semibold tracking-wide uppercase bg-indigo-100 text-indigo-600">
                    超值优惠
                  </span>
                </div>
                <div className="mt-4 flex justify-center">
                  <span className="text-5xl font-extrabold text-gray-900">¥9.9</span>
                  <span className="ml-1 text-xl font-semibold text-gray-500 self-end">/月</span>
                </div>
              </div>
              <div className="px-6 pt-6 pb-8 sm:p-10 sm:pt-6">
                <ul className="space-y-4">
                  <li className="flex items-start">
                    <div className="flex-shrink-0">
                      <svg className="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="ml-3 text-base text-gray-700">无限次使用所有功能，无需单独付费</p>
                  </li>
                  <li className="flex items-start">
                    <div className="flex-shrink-0">
                      <svg className="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="ml-3 text-base text-gray-700">每日运势推送，掌握吉凶变化</p>
                  </li>
                  <li className="flex items-start">
                    <div className="flex-shrink-0">
                      <svg className="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="ml-3 text-base text-gray-700">专属客服通道，优先解答问题</p>
                  </li>
                  <li className="flex items-start">
                    <div className="flex-shrink-0">
                      <svg className="h-6 w-6 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="ml-3 text-base text-gray-700">更多高级功能与专属内容</p>
                  </li>
                </ul>
                <div className="mt-8">
                  <button className="block w-full bg-indigo-600 border border-transparent rounded-md py-3 px-6 text-center text-white font-medium hover:bg-indigo-700">
                    立即开通
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>

      <footer className="bg-white">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <div className="border-t border-gray-200 pt-6">
            <div className="mt-8 border-t border-gray-200 pt-8 md:flex md:items-center md:justify-between">
              <div className="flex space-x-6 md:order-2">
                <a href="#" className="text-gray-400 hover:text-indigo-600">
                  <span className="sr-only">客服</span>
                  <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                  </svg>
                </a>
              </div>
              <p className="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
                &copy; 2025 八字风水. 保留所有权利.
              </p>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default Home;
